<template>
  <div>
    <div v-if="isSearch">
      <el-form-item>
        <el-select :value="city" placeholder="请选择市" @change="handleCityChange" clearable>
          <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option></el-select>
      </el-form-item>
      <el-form-item>
        <el-select :value="area" placeholder="请选择区" @change="handleAreaChange" clearable>
          <el-option
              v-for="item in areaOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option></el-select>
      </el-form-item>
    </div>
    <div v-else>
        <el-cascader :options="cityOptions" :value="cityValue" @change="handleChange"></el-cascader>
    </div>
  </div>

</template>

<script>
export default {
  name: "CityCascader",
  props: ['value', 'isSearch'],
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      cityOptions: [{
        value: '杭州市',
        label: '杭州市',
        children: [{
          value: '富阳市',
          label: '富阳市'
        },{
          value: '拱墅区',
          label: '拱墅区'
        },{
          value: '临安市',
          label: '临安市'
        },{
          value: '上城区',
          label: '上城区'
        },{
          value: '下城区',
          label: '下城区'
        },{
          value: '余杭区',
          label: '余杭区'
        }]
      },{
        value: '湖州市',
        label: '湖州市',
        children: [{
          value: '德清区',
          label: '德清区'
        },{
          value: '南浔区',
          label: '南浔区'
        },{
          value: '吴兴区',
          label: '吴兴区'
        }]
      },{
        value: '嘉兴市',
        label: '嘉兴市',
        children: [{
          value: '海宁市',
          label: '海宁市'
        },{
          value: '海盐县',
          label: '海盐县'
        },{
          value: '南湖区',
          label: '南湖区'
        },{
          value: '桐乡市',
          label: '桐乡市'
        },{
          value: '秀洲区',
          label: '秀洲区'
        },]
      }
      ],
      areaOptions: Object.assign([], this.defaultAreaOptions)
    }
  },
  mounted() {
    console.log("defaultAreaOptions => ")
    console.log(this.defaultAreaOptions)
    this.areaOptions = Object.assign([], this.defaultAreaOptions)
  },
  methods: {
    handleCityChange(value) {
      console.log("city => ")
      console.log(value)
      this.$emit('change', value)
    },
    handleAreaChange(value) {
      if (!this.city) {
        for (let j in this.cityOptions) {
          if (this.cityOptions.hasOwnProperty(j)) {
            console.log(this.cityOptions[j])
            for (let k in this.cityOptions[j].children) {
              if (this.cityOptions[j].children.hasOwnProperty(k)) {
                if (value === this.cityOptions[j].children[k].value) {
                  this.value = this.cityOptions[j].value + value
                }
              }
            }
          }
        }
      }
      console.log(this.city + value)
      this.$emit('change', this.city + value)
    },
    handleChange(value) {
      this.$emit('change', value[0] + value[1]);
    }
  },
  watch: {
    city: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log("new: %s, old: %s", newVal, oldVal)
        if (newVal === "" || newVal === null && oldVal === undefined) {
          this.areaOptions = this.defaultAreaOptions
        } else {
          if (newVal !== oldVal) {
            this.areaOptions = this.cityOptions.filter(city => {
              if (city.value === newVal) {
                return true
              }
            })[0].children
          }
        }
      }
    },
    area(newVal) {
      console.log("newVal =>" + newVal)
    }
  },
  // 父传子
  computed: {
    city() {
      if (this.value != null) {
        return this.value.substring(0, 3);
      }
    },
    area() {
      if (this.value != null) {
        return this.value.substring(3, 6);
      }
    },
    cityValue() {
      if (this.value != null) {
        return [this.value.substring(0, 3), this.value.substring(3, 6)];
      }
    },
    defaultAreaOptions() {
      let list = []
      for (let j in this.cityOptions) {
        if (this.cityOptions.hasOwnProperty(j)) {
          for (let k in this.cityOptions[j].children) {
            if (this.cityOptions[j].children.hasOwnProperty(k)) {
              list.push({
                label: this.cityOptions[j].children[k].label,
                value: this.cityOptions[j].children[k].value
              })
            }
          }
        }
      }
      return list
    }
  }
}
</script>

<style scoped>
  .el-select {
    height: 20px;
  }
</style>
